
<template>
  <div class="goods">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
        <el-breadcrumb-item>搜索</el-breadcrumb-item>
        <el-breadcrumb-item>分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑end -->
    <!-- 分类标签 -->
    <div class="classification">
      <div class="cateGory">
        <el-tabs  type="card" value="first" class="haha">
          <el-tab-pane  label="全部" name="first">
            <div class="main">
              <div class="list">
                <MyList :data="serchProectList " v-if="this.$route.params.keyword" />
                <MyList :data="productList" v-else/>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="手机" name="second">
            <div class="main">
              <div class="list">
                <MyList :data="productPhoneList" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="电视机" name="third">
            <div class="main">
              <div class="list">
                <MyList :data="productTvList" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="空调" name="fourth">
            <div class="main">
              <div class="list">
                <MyList :data="productTvList" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="洗衣机" name="six">

          </el-tab-pane>
          <el-tab-pane label="保护套" name="seven"></el-tab-pane>
          <el-tab-pane label="保护膜" name="eight"></el-tab-pane>
          <el-tab-pane label="充电器" name="nine"></el-tab-pane>
          <el-tab-pane label="充电宝" name="ten"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getGoodsCategory,
  getGoodsCategoryPhone,
  getGoodsCategoryTv,
} from "@/api";
export default {
  name: "Goods",
  data() {
    return {
      total: "", //总页数
      pagesize: "", //每页多少条数据
      page: "", //当前页码
      productList: [], //全部数据
      productPhoneList: [], //手机数据
      productTvList: [], //电视数据
    };
  },
  methods: {
    // 分类 ---全部商品
    async GoodsCategory() {
      const result = await getGoodsCategory();
      this.productList = result.Product;
    },
    // 分类----手机
    async GoodCategoryPhone() {
      const result = await getGoodsCategoryPhone();
      this.productPhoneList = result.Product;
    },
    // 分类-----电视
    async GoodCategoryTv() {
      const result = await getGoodsCategoryTv();
      this.productTvList = result.Product;
    },
  },
  mounted() {
    // 全部商品
    this.GoodsCategory();
    // 手机
    this.GoodCategoryPhone();
    // 电视
    this.GoodCategoryTv();
  },
  // 模糊搜索
  computed:{
    serchProectList(){
      return this.productList.filter((pItem)=>{
        return pItem.product_name.indexOf(this.$route.params.keyword) !== -1;
      })
    }
  },
  // 组件卸载生命周期函数
  destroyed(){
    this.$bus.$emit('clear');
  }
};
</script>

<style scoped lang="less">
.goods {
  background-color: #f5f5f5;
  /* 面包屑CSS */
  .breadcrumb {
    height: 50px;
    background-color: white;
    .el-breadcrumb {
      width: 1220px;
      line-height: 30px;
      font-size: 16px;
      margin: 0 auto;
    }
  }
  /* 面包屑CSS END */
  /*分类标签*/
  .classification {
    height: 100%;
    background-color: #eee;

    .cateGory {
      width: 1220px;
      margin: 0 auto;
    }
  }
  /*分类标签结束*/
  .main {
    width: 1220px;
    margin: 0 auto;
    // 主要内容区
    .list {
      min-height: 650px;
      padding-top: 14.5px;
      // margin-left: 13.7px;
      overflow: auto;
    }
    // 分页
    .pagenation {
      text-align: center;
      height: 50px;
    }
  }
}
</style>